import React, { Component } from 'react';
import { Form, Input, Button, Row, Col, message } from 'antd';

class Register extends Component {
  formRef = React.createRef();
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  componentWillUnmount() {}

  render() {
    return <div>{this.switchView()}</div>;
  }

  switchView() {
    return this.makeBaseView();
  }

  makeBaseView() {
    return (
      <div className={'RegisterCss'}>
        <h1 style={{ fontSize: 26 }}>e盘点后台管理系统</h1>
        <div style={{ marginTop: 60 }}>
          <h1 style={{ marginBottom: 10, textAlign: 'left' }}>注册</h1>
          <Form
            ref={this.formRef}
            autoComplete="off"
            className={'formCss'}
            onFinish={this.onSubmit}
          >
            <Form.Item
              name={'number'}
              rules={[{ required: true, message: '账号不能为空!' }]}
            >
              <Input
                maxLength={11}
                className={'formItem'}
                placeholder={'请输入账号'}
              />
            </Form.Item>
            <Form.Item
              className={'formItem'}
              name={'password'}
              rules={[
                {
                  required: true,
                  message: '密码不能为空',
                },
              ]}
            >
              <Input maxLength={8} placeholder={'请输入密码'} />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                注册
              </Button>
            </Form.Item>
          </Form>

          <Row className={'regTxt'}>
            <Col span={12}>
              <a
                onClick={() => {
                  this.props.history.push('/login/index');
                }}
              >
                返回登录
              </a>
            </Col>
          </Row>
        </div>
      </div>
    );
  }

  onSubmit(value) {
    console.log(value);
  }
}

export default Register;
